<template>
  <div class="hot">
    <div class="hot-top">
      <div class="hot-left">
        <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="火">
        本周热门榜单
      </div>
      <div class="hot-right">
        全部榜单 <span class="iconfont hot-ln">&#xe666;</span>
      </div>
    </div>
    <div class="hot-bottom">
      <ul>
        <li v-for="itm in hotlist" :key="itm.id" >
          <router-link to="/details">
            <img :src="itm.imgUrl" alt="itm.title">
            <p class="title">{{itm.title}}</p>
            <p><span>￥{{itm.price}}</span>起</p>
            <img v-if="itm.img" :src="itm.img" alt="排名" class="imgBox">
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        "hotlist":[
          {
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1703/57/5794796148ac680da3.img.png_250x250_5abbae93.png",
            "id":"01",
            "title":"乐华城•乐华欢乐世界",
            "price":180,
            "img":"http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png"
          },{
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/2e/2eb25cce70d82954.water.jpg_250x250_4f1ff835.jpg",
            "id":"02",
            "title":"乐华城•乐华欢乐世界",
            "price":180,
            "img":"http://img1.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png"
          },{
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1411/9d/d74294e6031d93218b9ccfa621926d25.water.jpg_250x250_e993bb61.jpg",
            "id":"03",
            "title":"乐华城•乐华欢乐世界",
            "price":180,
            "img":"http://img1.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png"
          },{
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/b0/b093339694db4a11.water.jpg_250x250_7b1cfb31.jpg",
            "id":"04",
            "title":"乐华城•乐华欢乐世界",
            "price":180
          },{
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/31/31008ea4c8ebd546.water.jpg_250x250_a2feac59.jpg",
            "id":"05",
            "title":"乐华城•乐华欢乐世界",
            "price":180
          },{
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/2e/2eb25cce70d82954.water.jpg_250x250_4f1ff835.jpg",
            "id":"06",
            "title":"乐华城•乐华欢乐世界",
            "price":180
          },{
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1703/57/5794796148ac680da3.img.png_250x250_5abbae93.png",
            "id":"07",
            "title":"乐华城•乐华欢乐世界",
            "price":180
          },{
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/b0/b093339694db4a11.water.jpg_250x250_7b1cfb31.jpg",
            "id":"08",
            "title":"乐华城•乐华欢乐世界",
            "price":180
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .hot{
    margin-top: .1rem;
    background: #fff;
    padding:.1rem;
  }
  .hot-left{
    font-size: .16rem;
    float: left;
  }
  .hot-right{
    font-size: .12rem;
    float: right;
  }
  .hot-top:after{
    content:"";
    display: block;
    clear: both;
  }
  .hot-ln{
    transform: rotate(180deg);
  }
  .hot-left img{
    width:.15rem;
    height:.15rem;
  }
  .hot-bottom ul{
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-top: .1rem;
    padding-bottom: .05rem;
  }
  .hot-bottom ul>li{
    display: inline-block;
    margin-right: .1rem;
    width:1rem;
    position: relative;
  }
  .hot-bottom ul>li img{
    width:100%;
  }
  .hot-bottom ul>li p{
    font-size: .1rem;
    text-align: center;
  }
  .title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .06rem;
  }
  .hot-bottom ul>li p>span{
    color: #ff8300;
  }
  .hot-bottom ul>li .imgBox{
    width:.42rem;
    height:.2rem;
    position:absolute;
    top:-.05rem;
    left: 0;
  }
  .hot-top{
    padding-bottom: .1rem;
  }
  .hot-bottom .title{
    color:#616161;
  }
</style>
